<template>
  <div class="app-container">
    <div style="padding: 5px 0px">
      <toolbar
        :table="$refs.table"
        @add="handleEdit"
        @delete="handleDelete"
        @refresh="handleRefresh"
      >
      </toolbar>
    </div>
    <div>
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        ref="table"
        @cell-dblclick="hanldeDbClick"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="代码">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "平台权限" : "系统权限" }}
          </template>
        </el-table-column>
        <el-table-column type="expand" label="权限">
          <template slot-scope="props">
            <div style="padding-bottom: 10px">
              <el-button
                size="mini"
                type="primary"
                @click="() => handleAddItem(props.row)"
                >新增</el-button
              >
              <el-button size="mini" @click="() => handleDeleteItem(props.row)"
                >删除</el-button
              >
            </div>

            <el-table
              :data="getPermissionTreeData(props.row.items)"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              border
              :ref="'table_' + props.row.id"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              @selection-change="(val) => handleSelectionChange(props.row, val)"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="code" label="代码"> </el-table-column>
              <el-table-column prop="name" label="名称"> </el-table-column>
              <el-table-column label="" width="180">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    @click="() => handleEditItem(scope.row.id, props.row)"
                    >编辑</el-link
                  >
                  <el-link style="padding-left:10px"
                    v-if="scope.row.children && scope.row.children.length == 0"
                    type="primary"
                    @click="() => handleEditGrant(scope.row)"
                    >关联API</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row.id)"
              >{{ $t("common.edit") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page.sync="filter.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size.sync="filter.pageSize"
        :prev-click="handlePrePage"
        :next-click="handleNextPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-drawer direction="rtl" :visible.sync="editDrawer" :with-header="false">
      <div v-if="editDrawer">
        <edit
          :id.sync="currentId"
          title="权限组"
          @refresh="hanldeEditRefresh"
        ></edit>
      </div>
    </el-drawer>
    <el-drawer
      direction="rtl"
      :visible.sync="editItemDrawer"
      :with-header="false"
    >
      <div v-if="editItemDrawer">
        <item-edit
          :id.sync="currentItemId"
          :type.sync="currentItemType"
          :groupId.sync="currentGroupId"
          title="权限项"
          @refresh="hanldeEditItemRefresh"
        ></item-edit>
      </div>
    </el-drawer>
    <el-drawer
      direction="rtl"
      :visible.sync="editGrantDrawer"
      :with-header="false"
      :size="'55%'"
    >
      <div v-if="editGrantDrawer">
        <grant-edit
          :id.sync="currentItemId"
          :item.sync="currentItem"
          title="关联API"
          @refresh="hanldeEditItemRefresh"
        ></grant-edit>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import edit from "./edit.vue";
import itemEdit from "./itemEdit.vue";
import grantEdit from "./grantEdit.vue";
import {
  getPermissionGroups,
  deletePermissionGroup,
  deletePermissionItem,
} from "@/api/permission";
export default {
  components: {
    toolbar,
    edit,
    itemEdit,
    grantEdit,
  },
  data() {
    return {
      list: null,
      filter: {
        pageIndex: 1,
        pageSize: 1000,
      },
      editDrawer: false,
      currentId: "",
      total: 0,
      permissionTreeProps: {
        children: "children",
        label: "name",
      },
      currentItemId: null,
      currentItem: null,
      currentItemType: null,
      editItemDrawer: false,
      currentGroupId: null,
      selectionItems: [],
      editGrantDrawer: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getPermissionGroups({
        skipCount: this.skipCount,
        maxResultCount: this.maxResultCount,
        sorting: "name",
      }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.total = res.totalCount;
        this.list = res.items;

        this.expandCurrentRow();
      });
    },
    handlePageChange(pageIndex) {
      this.filter.pageIndex = pageIndex;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.filter.pageSize = pageSize;
      this.getData();
    },
    handlePrePage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex - 1;
    },
    handleNextPage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex + 1;
    },
    handleEdit(id) {
      this.editDrawer = true;
      this.currentId = id;
    },
    handleDelete({ ids }) {
      if (!ids || ids.length == 0) return;
      for (let i = 0; i < ids.length; i++) {
        deletePermissionGroup(ids[i]).then((res) => {
          if (i == ids.length - 1) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getData();
    },
    hanldeEditRefresh() {
      this.editDrawer = false;
      this.getData();
    },
    hanldeDbClick(row) {
      this.currentId = row.id;
      this.editDrawer = true;
    },
    getPermissionTreeData(items) {
      return items.toTree();
    },
    hanldeEditItemRefresh() {
      this.editItemDrawer = false;
      this.getData();
    },
    handleAddItem(group) {
      this.editItemDrawer = true;
      this.currentItemId = null;
      this.currentItemType = group.type;
      this.currentGroupId = group.id;
    },
    handleEditItem(id, group) {
      this.editItemDrawer = true;
      this.currentItemId = id;
      this.currentItemType = group.type;
      this.currentGroupId = group.id;
    },
    handleDeleteItem(group) {
      if (this.currentGroupId != group.id) {
        this.selectionItems = [];
        return;
      }
      if (!this.selectionItems || this.selectionItems.length == 0) return;

      for (let i = 0; i < this.selectionItems.length; i++) {
        deletePermissionItem(this.selectionItems[i].id).then((res) => {
          this.getData();
        });
      }
    },
    handleSelectionChange(group, val) {
      this.currentGroupId = group.id;
      this.selectionItems = val;
    },
    expandCurrentRow() {
      if (!this.currentGroupId) return;

      let currentRow = this.list.find((x) => {
        return x.id == this.currentGroupId;
      });

      if (currentRow) this.$refs.table.toggleRowExpansion(currentRow, true);
    },
    handleEditGrant(item) {
      this.currentItemId = item.id;
      this.currentItem = item;
      this.editGrantDrawer = true;
    },
  },
  computed: {
    skipCount() {
      return (this.filter.pageIndex - 1) * this.filter.pageSize;
    },
    maxResultCount() {
      return this.filter.pageSize;
    },
  },
};
</script>
